<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/login.css">
</head>
<body>
    <div id="login-form">
        <h1>登录</h1>
        <div class="input_container">用户名:  <br><input v-model="username" type="text" placeholder="用户名">
        </div>
        <div class="input_container">
        密码:<br><input v-model="password" type="password" placeholder="密码">
        </div>
        <div id="login_register">
            <button @click="login()">登录</button>
            <button @click="register()">注册</button>
        </div>
    </div>
    <script>
        var loginForm = Vue.createApp({
            data() {
                return {
                    username: '',
                    password: ''
                }
            },
            methods: {
                login() {
                    if (this.username === '' || this.password === '') {
                        alert('请输入用户名和密码');
                        return ;
                    } else if (this.password.length < 6) {
                        alert('密码长度不能小于6位');
                        return ;
                    }
                    fetch("http://localhost:8080/login", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            username: this.username,
                            password: this.password
                        })
                    }).then(response => {
                        return response.json()
                    }).then(data => {
                        if (data.status == "success") {
                            alert(data.message)
                            window.location.href = './index.html';
                        }
                        else if (data.status == "error") {
                            alert(data.message)
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                },
                register() {
                    if (this.username === '' || this.password === '') {
                        alert('请输入用户名和密码');
                        return ;
                    } else if (this.password.length < 6) {
                        alert('密码长度不能小于6位');
                        return ;
                    }
                    fetch("http://localhost:8080/register", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            username: this.username,
                            password: this.password
                        })
                    }).then(response => {
                        if (response.ok) {
                            return response.json()
                        }
                    }).then(data => {
                        if (data.status == "success") {
                            alert('注册成功')
                            window.location.href = '/index.html'
                        } else if (data.status == "error") {
                            alert('用户名已存在')
                            return ;
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }
        })
        loginForm.mount('#login-form')
    </script>
</body>
</html>
